<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="费用说明：" >
        <quilleditor v-model="form.costContent" :disabled="type=='look'"/>
      </el-form-item>
      <el-form-item label="改退规则：" >
        <div>
          <el-radio-group v-model="form.penalty_type" :disabled="type=='look'">
            <el-radio label="1">使用全局设置</el-radio>
            <el-radio label="2">单独编辑</el-radio>
          </el-radio-group>
          <div v-if="form.penalty_type==2">这里可以不做设置，在<el-button type="text" @click="goset">线路设置</el-button
          >中填写全局设置</div>
        </div>
        <div v-if="form.penalty_type==1">
          <el-radio-group  v-model="form.penalty_id">
            <el-radio v-for="item in backRules" :key="item.penalty_id" :label="item.penalty_id">{{item.penalty_name}}</el-radio>
          </el-radio-group>
        </div>
        <div  v-if="form.penalty_type==2">
          <el-table
            class="small-table mb16"
            :data="form.penaltyInfoArr"
            border
            style="width: 70%"
          >
            <el-table-column label="出行前（天）">
              <template slot-scope="scope">
                <span>{{scope.row.start_day}}</span>-<span>{{scope.row.end_day}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="proportion" label="违约金（占订单总费用%）"> </el-table-column>
            <el-table-column label="操作" v-if="type!='look'">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="openDlg(scope.row, scope.$index)"
                  ><i class="iconfont icon-edit"></i>编辑</el-button
                >
                <el-button type="text" @click="del('append', scope.$index)"
                  ><i class="iconfont icon-del"></i>删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-button type="primary" v-if="type!='look'" size="medium" @click="openDlg('')"
              ><i class="iconfont icon-plus"></i>添加</el-button
            >
          </div>
        </div>
      </el-form-item>
    </el-form>
    <!-- // 添加编辑 -->
    <el-dialog :title="dialogObj.title" :visible.sync="dialogFormVisible">
      <el-form
        ref="addform"
        :model="addform"
        :rules="addrules"
        label-width="200px"
      >
        <el-form-item label="出行前（天）" prop="hasDay">
          <div class="flex">
            <div><el-input class="smi" placeholder="请输入" v-model="addform.start_day"></el-input>&nbsp;天</div>
            <div style="margin: 0 10px;">----</div>
            <div><el-input class="smi" placeholder="请输入" v-model="addform.end_day"></el-input>&nbsp;天</div>
          </div>
        </el-form-item>
        <el-form-item label="违约金（占订单总费用%）" prop="proportion">
          <el-input class="w300" placeholder="请输入" v-model="addform.proportion"></el-input>&nbsp;%
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import quilleditor from 'components/quilleditor';
import {deepClone} from 'common/js/util';
import {  getPenaltyList } from 'api/lineManagement/lineGlobalSettingAPI'
export default {
  components: {
    quilleditor
  },
  props: ['type'],
  computed: {
    dialogObj() {
      let obj;
      if(this.dlgisEdit) {
        obj = {
          title: '编辑'
        }
      }else{
        obj = {
          title: '添加'
        }
      }
      return obj;
    },
    myday() {
      if(this.addform.start_day && this.addform.end_day){
        return true
      }
      return false
    }
  },
  watch: {
    myday(val) {
      console.log(val)
      this.addform.hasDay = val
    }
  },
  data() {
    return {
      addform: {},
      dialogFormVisible: false,
      form: {
        penalty_type: '',
        penalty_id: '',
        costContent: '',
        penaltyInfoArr: []
      },
      dlgisEdit: false,
      addrules: {
        hasDay: [
          { required: true, message: '请输入完整天数', trigger: 'blur' }
        ],
        proportion: [
          { required: true, message: '请输入违约金', trigger: 'blur' }
        ]
      },
      backRules: []
    };
  },
  methods: {
    setData(value) {
      let data = deepClone(value.costInfo)
      data.penaltyInfoArr = data.penaltyInfoArr || []
      this.form = {...this.form, ...data}
    },
    goset() {
      window.open('/home/lineGlobalSetting')
    },
    async getData() {
      let data = {}
      data.costInfo = {...this.form}
      if(this.form.penalty_type=='1') {
        delete data.costInfo.penaltyInfoArr
      }else if(this.form.penalty_type=='2') {
        delete data.costInfo.penalty_id
      }
      return data
    },
    openDlg(row, index) {
      this.addform = {};
      this.dialogFormVisible = true;
      this.dlgisEdit = false;
      if (row) {
        this.editIndex = index;
        this.dlgisEdit = true;
        this.addform = {...row}
      }
    },
    del(index) {
      this.form['penaltyInfoArr'].splice(index, 1);
    },
    doAction() {
      let obj = {...this.addform}
      if (this.dlgisEdit) {
        let oldObj = [...this.form['penaltyInfoArr']];
        oldObj[this.editIndex] = obj;
        this.form['penaltyInfoArr'] = oldObj;
      } else {
        this.form['penaltyInfoArr'].push(obj);
      }
      this.dialogFormVisible = false;
    },
    // 获取该退规则列表
    _getPenaltyList() {
      getPenaltyList().then(res => {
        res.rData.forEach(item => item.penalty_id+='')
        this.backRules = res.rData
      })
    }
  },
  mounted() {
    // 获取
    this._getPenaltyList()
  }
};
</script>

<style lang="scss" scoped>
.smi{
  width: 100px;
}
.w300{
  width: 300px;
}
</style>
